{extend name="layout/layout" /}


{block name="style"}
	<style>

		.search{
			display: flex;
			height: 45px;
			justify-content: center;
			align-items: center;
			background: #fff;
			z-index: 99;
			line-height: 45px;
			text-align: center;
		}

		.search .account-type, .search .type{
			flex:1;
			font-size: 10px;
			border-bottom: 1px solid #eee;
		}

		.search .search-btn{
			background: #3385ff;
			color: #fff;
			width: 80px;
			border-bottom: 1px solid #3385ff;
		}

		.search .mui-icon{
			font-size: 16px;
		}

		.mask{
			background: rgba(0, 0, 0, 0.4);
			position: fixed;
			z-index: 20;
			width: 100%;
			top:0;
			left: 0;
			height: 100%;
		}
		
		.mask .mask-container{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background: #fff;
		}
		
		.mask .mask-title{
			height: 45px;
			line-height: 45px;
			text-align: center;
			border-bottom: 1px solid #ddd;
		}
		
		.mask .mask-close-btn{
			height: 45px;
			line-height: 45px;
			background: #FE0036;
			color:#fff;
			width: 100%;
			text-align: center;
			position: absolute;
			bottom: 0;
		}
		
		.mask .mui-table-view{
			margin: 0;
		}
		
		.mask .mask-list{
			max-height: 400px;
			overflow-y: scroll;
			margin-bottom: 50px;
		}
		
		.mask .mui-table-view-cell{
			padding: 10px 0;
		}
	</style>
{/block}

{block name="main"}
	<div class="detail" v-cloak id="detail">
		<div class="box">
			<div>
				<div class="search">
					<div class="account-type" @tap="showMask=showAccountTypeList=true">{{accountTypeList[account_type_index]['type_name']}} <i class="mui-icon mui-icon-arrowdown"></i></div>
					<div class="type" @tap="showMask=showTypeList=true">{{typeList[type_index]['type_name']}} <i class="mui-icon mui-icon-arrowdown"></i></div>
					<div class="search-btn" @tap="search()">搜索</div>
				</div>	

				<ul class="mui-table-view" v-if="list.length > 0">

				    <li class="mui-table-view-cell" v-for="item in list">
				    	<div class="mui-row">
				    		<div class="mui-col-xs-9">
				    			<div>{{item.account_type}}</div>
				    			<div>【{{item.type}}】 {{item.remark}}</div>
				    			<p>{{item.create_time}}</p>
				    		</div>
				    		<div class="mui-col-xs-3 mui-text-right" >
				    			<b :class="item.operation_type == 1?'text-success':'text-warning'">
						    		{{item.operation_type == 1?'+':'-'}}￥{{item.amount}}
				    			</b>
					    	</div>
				    	</div>
				    </li>
				</ul>
				<div v-else class="no-data">没有相关记录</div>
			</div>
		</div>

		<div class="mask" v-if="showMask" @tap="showMask = showTypeList = showAccountTypeList = false">
			<div class="mask-container" @tap.stop="showMask = true">
				<div class="goods-status">
					<div class="mask-list" v-if="showAccountTypeList">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell" @tap.stop="select_account_type(item, index)" v-for="(item, index) in accountTypeList">
								<div class="mui-input-row mui-radio mui-right">
									<label>{{item.type_name}}</label>
									<input name="radio1" type="radio">
								</div>
							</li>
						</ul>
					</div>

					<div class="mask-list" v-if="showTypeList">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell" @tap.stop="select_type(item, index)" v-for="(item, index) in typeList">
								<div class="mui-input-row mui-radio mui-right">
									<label>{{item.type_name}}</label>
									<input name="radio1" type="radio" :checked="index == type_index">
								</div>
							</li>
						</ul>
					</div>
				</div>
				
				<div class="mask-close-btn" @tap.stop="showMask = showTypeList = showAccountTypeList = false">关闭</div>
			</div>
		</div>
	</div>
{/block}
{block name="navbar"}{/block}
{block name="script"}
	<script>
		mui.init({
		  pullRefresh : {
		    container:"#detail",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
		    down : {
		      style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
		      color:'#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
		      height:'50px',//可选,默认50px.下拉刷新控件的高度,
		      range:'100px', //可选 默认100px,控件可下拉拖拽的范围
		      offset:'0px', //可选 默认0px,下拉刷新控件的起始位置
		      auto: false,//可选,默认false.首次加载自动上拉刷新一次
		      callback :function(){
		      	console.log('down');
		      	myVue.goodsList = [];
		      	myVue.page = 1;
		      	myVue.nextPage = false;
		      	// mui('#pullup-container').pullRefresh().refresh(true);

		      	myVue.getDetail();
		      	// mui('.group-goods').pullRefresh().endPulldown();
		      } //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
		    },
		    up : {
		      height:50,//可选.默认50.触发上拉加载拖动距离
		      auto:true,//可选,默认false.自动上拉加载一次
		      contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
		      contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
		      callback :function(){
		      	myVue.getDetail();
		      	this.endPullupToRefresh(myVue.nextPage);
		      } //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
		    }
		  }
		});

		var myVue = new Vue({
			el:'.detail',
			data:{
				list:[],
				page: 1,
				nextPage: false,
				accountTypeList: [
					{type_id: '', type_name: '全部帐户'},
				],
				typeList: [
					{type_id: '', type_name: '全部类型'},
				],
				showMask: false,
				showAccountTypeList: false,
				showTypeList: false,
				account_type_index: 0,
				type_index: 0,
			},
			mounted: function(){
				if(token){
					this.token = token;
					console.log(this.token);
					// this.getDetail();
					this.getTypeList();
				} else {
					this.login();
				}

			},
			methods: {
				//获取帐单数据
				getDetail: function(){
					layer.open({
						type:2,
						shadeClose:false,
						shade: 'background-color: rgba(0,0,0,.3)',
					});
					var url = 'funds/detail';
					var that = this;

					var data = {
						page: that.page,
						type: that.accountTypeList[that.account_type_index]['type_id'],
						operation_type: that.typeList[that.type_index]['type_id']
					}
					request(that, {'url': url, 'data': data}, function(res){
						layer.closeAll();
						if(res.code == 200) {
							that.list = that.list.concat(res.data);
							that.page ++;
							if(res.data.length < 20) {
								that.nextPage = true;
							}
						} else {
							mui.toast(res.msg);
						}	
					});
				},
				//获取帐户及操作类型
				getTypeList: function(){
					layer.open({
						type:2,
						shadeClose:false,
						shade: 'background-color: rgba(0,0,0,.3)',
					});
					var url = 'funds/getTypeList';
					var that = this;
					request(that, {'url': url, 'data': {}}, function(res){
						layer.closeAll();
						if(res.code == 200) {
							that.accountTypeList = that.accountTypeList.concat(res.data.account_type);
							that.typeList = that.typeList.concat(res.data.type_list);
						} else {
							mui.toast(res.msg);
						}	
					});
				},

				//选择帐单类型
				select_type: function(item, index) {
					this.type_index = index;
					this.showMask = this.showTypeList = this.showAccountTypeList = false;
				},
				//选择帐户类型
				select_account_type: function(item, index){
					this.account_type_index = index;
					this.showMask = this.showTypeList = this.showAccountTypeList = false;
				},

				login:function(){
					location.href = '/mobile/user/login';
				},

				//搜索
				search: function(){
					this.page = 1;
					this.list = [];
					this.nextPage= false;
					this.getDetail();
				}
			}
		});
	</script>
{/block}